Inputs fields are used to get the user input in a text field.
import { Input } from '@nextui-org/react';DefaultThe default Input contains an animation effect.
DisabledUnusable and un-writable Input.
ClearableAdd a clear button in the Input box.
LabelAdd a label to the Input with the property label
Label PlaceholderWith the property labelPlaceholder the placeholder becomes a label with a great animation.
PasswordInput component with a show/hide password functionality, Important: You have to use the Input.Passwordcomponent.
SizesChange the size of the entire Input including padding, font-size and border with the size property.
BorderedYou can change the full style to a bordered Input with the bordered property andyou can customize the color with the color prop.
UnderlinedYou can change the full style to an underlined Input like the material effect just addingthe underlined prop.
RoundedYou can completely round the corners of any type of Input with the rounded prop.
StatusYou can change the color of the entire Input with the property status.
No ShadowYou can disable the shadow of the entire Input with the property shadow={false}.
Helper textYou can add a helper text to Input with the prop helperText and customise its color with the helperColor prop.The first example is using the hook useInput
Left/right labelsYou can put any content at the beginning or at the end of the Input
ContentYou can put any content at the beginning or at the end of the Input with the properties contentLeft and contentRight.Important: If you want the Input component to change the icon colors according to the current status coloryou should use currentColor as the icon/svg color to allows.
No AnimatedYou can disable the animation of the entire Input with the property animated={false}.
Input TypesChange the type of Input with the type property as a native html input, the default value is text
APIsInput PropsAttributeTypeAccepted valuesDescriptionDefaultvaluestringstring[]number-Input value-initialValuestring-Input default value-placeholderstring-The short hint displayed in the input-sizeNormalSizesNormalSizesChange input sizemediumcolorSimpleColorsSimpleColorsChange input text, border and label colordefaultstatusSimpleColorsSimpleColorsChange input status colordefaulthelperColorSimpleColorsSimpleColorsChange helper text colordefaultrequiredbooleantrue/falseRequired input propfalsereadOnlybooleantrue/falseIt prevents the user from changing the value of the fieldfalsedisabledbooleantrue/falseDisable inputfalseclearablebooleantrue/falseShow clear buttonfalseroundedbooleantrue/falseRounded inputfalseborderedbooleantrue/falseBordered inputfalseunderlinedbooleantrue/falseUnderlined inputfalseshadowbooleantrue/falseEnable or disable the input shadowtrueanimatedbooleantrue/falseEnable or disable the input animationtrueautoCompletestring-HTML input autocomplete attributeoffborderWeightNormalWeightsNormalWeightsBorder weight for bordered inputnormalfullWidthboolean-If true, the input will take up the full width of its container.falsewidthstring-Input widthinitiallabelstring-Text label for input-labelPlaceholderstring-The placeholder becomes a label-labelLeftstring-Text label at left of the input-labelRightstring-Text label at right of the input-helperTextstring-Add a helper text to Input-contentLeftReact.ReactNode-Left content for input-contentRightReact.ReactNode-Right content for input-contentClickablebooleantrue/falseLeft/right content are clickable (just applied when the styling prop is true, see the next props)falsecontentLeftStylingbooleantrue/falseAllows the Input component to wrap the contentLeft in a containertruecontentRightStylingbooleantrue/falseAllows the Input component to wrap the contentRight in a containertrueonChange(e: React.ChangeEvent) => void-Callback fired when the value is changed-onFocus(e: React.FocusEvent) => void-Callback fired when the input is focused.-onBlur(e: React.FocusEvent) => void-Callback fired when the input is blurred.-onContentClick(key: ContentPosition, e: React.MouseEvent) => voidContentPositionclick icon event-onClearClick(e: React.MouseEvent) => void-clear icon event-refRef| null-forwardRef-cssStitches.CSS-Override Default CSS style-askeyof JSX.IntrinsicElements-Changes which tag component outputsinput...InputHTMLAttributes'alt', 'type', 'className', ...Input native props-Input.Password propsAttributeTypeAccepted valuesDescriptionDefaulthideToggleboolean-Hide toggle iconfalsevisibleIconReact.ReactNode-Custom visible password icon-hiddenIconReact.ReactNode-Custom hidden password icon-cssStitches.CSS-Override Default CSS style-askeyof JSX.IntrinsicElements-Changes which tag component outputsinput...Input PropsInput PropsInput props-Input typesSimple Colorstype NormalColors = | 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error';Normal Sizestype NormalSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';Normal Weightstype NormalWeights = 'light' | 'normal' | 'bold';Content Positiontype ContentPosition = 'left' | 'right';useInputtype useInput = (initialValue: string) => { value: string; setValue: Dispatch; currentRef: MutableRefObject; reset: () => void; bindings: {value: string;onChange: (event: React.ChangeEvent) => void; };};BadgeTextareaEdit this page on GitHub